<template>
  <div class="game" @click="handlePanelClick" @contextmenu.prevent="moveOut()">
    <a @click="$router.push('/')" href="javascript:;">返回登陆界面</a>
    <!-- logo -->
    <div class="logo">
      <img src="@/assets/resources/logo.png" />
    </div>
    <!-- 中间 -->
    <div class="center">
      <div v-show="centerObj.isPlay" class="center-operation">
        <button @click="moveOut()">出牌</button>
        <button class="center-operation-check" @click="moveCheck()">
          不出
        </button>
        <button @click="prompt()">提示</button>
      </div>
      <div
        @click="pokerClick(index)"
        :class="{ moveTop: item.isMoveTop, moveOut: item.isMoveOut }"
        ref="center"
        v-for="(item, index) in centerObj.list"
        :key="index"
        class="center-poker"
      >
        <img :src="item.src" />
      </div>
      <div class="avatar">
        <div class="user">
          <img @click.stop="centerObj.infoCardVisble = true" ref="centerImg" src="@/assets/user/2.svg" />
          <Dialog ref="center1" :selfEl="'center'" :userInfo="centerObj.data" isSelfCard :visible.sync="centerObj.infoCardVisble" :position="'right'" @makeAnimation="animation"></Dialog>
        </div>
        <span class="player_name"
          >{{ centerObj.data.name }}
          <span ref="center_integral" style="color: yellow">{{
            centerObj.integral
          }}</span>
        </span>
      </div>
      <div v-show="centerObj.isPlay" class="center-timer">
        <img src="@/assets/resources/timer.svg" />
        <span>{{ centerObj.timer }}秒</span>
      </div>
    </div>
    <!-- 右边 -->
    <div class="right">
      <div
        ref="right"
        v-for="(item, index) in rightObj.list"
        :key="index"
        class="right-poker"
      >
        <img :src="item" />
      </div>
      <div class="avatar">
        <img @click.stop="rightObj.infoCardVisble = true" ref="rightImg" src="@/assets/user/3.svg" />
        <Dialog ref="right1" :selfEl="'right'" :userInfo="rightObj.data" :visible.sync="rightObj.infoCardVisble" :position="'left'" @makeAnimation="animation"></Dialog>
        <span class="player_name"
          >{{ rightObj.data.name }}
          <span ref="right_integral" style="color: yellow">{{
            rightObj.integral
          }}</span>
        </span>
      </div>
      <div v-if="rightObj.outOfCards.length">
        <div
          ref="rightOut"
          v-for="(item, index) in rightObj.outOfCards"
          :key="index"
          class="right-poker-out"
        >
          <img :src="item" />
        </div>
      </div>
      <div v-if="rightObj.isPlay" class="right-timer">
        <img src="@/assets/resources/timer.svg" />
        <span>{{ rightObj.timer }}秒</span>
      </div>
    </div>
    <!-- 上边 -->
    <div class="top">
      <div
        ref="top"
        v-for="(item, index) in topObj.list"
        :key="index"
        class="top-poker"
      >
        <img :src="item" />
      </div>
      <div class="avatar">
        <img @click.stop="topObj.infoCardVisble = true" ref="topImg" src="@/assets/user/4.svg" />
        <Dialog ref="top1" :selfEl="'top'" :userInfo="topObj.data" :visible.sync="topObj.infoCardVisble" :position="'right'" @makeAnimation="animation"></Dialog>
        <span class="player_name"
          >{{ topObj.data.name }}
          <span ref="top_integral" style="color: yellow">{{
            topObj.integral
          }}</span>
        </span>
      </div>
      <div v-if="topObj.outOfCards.length">
        <div
          ref="topOut"
          v-for="(item, index) in topObj.outOfCards"
          :key="index"
          class="top-poker-out"
        >
          <img :src="item" />
        </div>
      </div>
      <div v-if="topObj.isPlay" class="top-timer">
        <img src="@/assets/resources/timer.svg" />
        <span>{{ topObj.timer }}秒</span>
      </div>
    </div>
    <!-- 左边 -->
    <div class="left">
      <div
        ref="left"
        v-for="(item, index) in leftObj.list"
        :key="index"
        class="left-poker"
      >
        <img :src="item" />
      </div>
      <div class="avatar">
        <img @click.stop="leftObj.infoCardVisble = true" ref="leftImg" src="@/assets/user/5.svg" />
        <Dialog ref="left1" :selfEl="'left'" :userInfo="leftObj.data" :visible.sync="leftObj.infoCardVisble" :position="'right'" @makeAnimation="animation"></Dialog>
        <span class="player_name"
          >{{ leftObj.data.name }}
          <span ref="left_integral" style="color: yellow">{{
            leftObj.integral
          }}</span>
        </span>
      </div>
      <div v-if="leftObj.outOfCards.length">
        <div
          ref="leftOut"
          v-for="(item, index) in leftObj.outOfCards"
          :key="index"
          class="left-poker-out"
        >
          <img :src="item" />
        </div>
      </div>
      <div v-if="leftObj.isPlay" class="left-timer">
        <img src="@/assets/resources/timer.svg" />
        <span>{{ leftObj.timer }}秒</span>
      </div>
    </div>
    <!-- 背景音乐图标 -->
    <div
      ref="action"
      @click="action()"
      class="iconfont action"
      :class="isplayGBmusic ? 'icon-shengyinkai' : 'icon-shengyinjingyin'"
    ></div>
    <transition
      name="animationMoveEl"
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
    >
      <div v-show="animationMoveElVisible" ref="animationMoveEl" class="animationMoveEl">
        <img :src="animationMoveImg" />
      </div>
    </transition>
    <transition
      name="animationEl"
      @before-enter="_beforeEnter"
      @enter="_enter"
      @after-enter="_afterEnter"
    >
      <div v-show="animationElVisible" class="animationEl" ref="animationEl">
        <img :src="animationElImg" alt="">
      </div>
    </transition>
    <button @click="click">点击它</button>
  </div>
</template>
<script>
import { includes } from "@/utils/arrayApi";
import { toggleSrc } from "@/utils/toggleSrc";
import { changeImages, getImgSrc } from "@/utils/runFrame"
import Dialog from "./dialog.vue";
export default {
  data() {
    return {
      user: null,
      player: {},
      pokers: [
        { id: 1, types: "h", point: "A", isMoveTop: false, isMoveOut: false },
        { id: 2, types: "d", point: "K", isMoveTop: false, isMoveOut: false },
        { id: 3, types: "c", point: "Q", isMoveTop: false, isMoveOut: false },
        { id: 4, types: "s", point: "J", isMoveTop: false, isMoveOut: false },
        { id: 5, types: "c", point: "10", isMoveTop: false, isMoveOut: false },
        { id: 6, types: "s", point: "9", isMoveTop: false, isMoveOut: false },
        { id: 7, types: "h", point: "8", isMoveTop: false, isMoveOut: false },
      ],
      topCount: 0,
      leftCount: 0,
      rightCount: 0,
      topObj: {
        data: {
          name: '---',
          img: '@/assets/user/2.svg',
          win: 23,
          lose: 34,
          odds: '45%'
        }, //玩家信息
        list: [], //手里牌
        outOfCards: [], //放出的牌
        timer: 20, //定时器
        isPlay: false, //是否为出牌状态
        firstFlag: false, //是否为首次出牌玩家
        integral: 0,
        infoCardVisble: false,
      },
      leftObj: {
        data: {
          name: '---',
          img: '@/assets/user/2.svg',
          win: 23,
          lose: 34,
          odds: '45%'
        },
        list: [],
        outOfCards: [],
        timer: 20,
        isPlay: false,
        firstFlag: false,
        integral: 0,
        infoCardVisble: false,
      },
      rightObj: {
        data: {
          name: '---',
          img: '@/assets/user/2.svg',
          win: 23,
          lose: 34,
          odds: '45%'
        },
        list: [],
        outOfCards: [],
        timer: 20,
        isPlay: false,
        firstFlag: false,
        integral: 0,
        infoCardVisble: false,
      },
      centerObj: {
        data: {
          name: '---',
          img: '@/assets/user/2.svg',
          win: 23,
          lose: 34,
          odds: '45%'
        },
        list: [],
        outOfCards: [],
        timer: 20,
        isPlay: false,
        firstFlag: false,
        integral: 0,
        infoCardVisble: false,
      },
      sound: new Audio(), //背景音乐
      playCardsSound: new Audio(), //出牌音效
      startGameSound: new Audio(), //游戏开始音效
      animationSound: new Audio(), //交互音效
      isplayGBmusic: false, //是否播放背景音乐
      integralTimer: null, //积分递增定时器
      animationMoveImg: "",
      animationMoveElVisible: false, //移动动画元素显示
      animationElImg: "", //动画元素图片
      animationElVisible: false, //动画元素显示
      animationIndex: 1, //动画索引
      animationToEl: '', 
      animationFrom: '', //从哪个玩家发出的动画
    };
  },
  mounted() {
    // 自动触发DOM事件，兼容chrome新特性
    // this.$refs.action.click();
    this.sound.src = require("@/assets/resources/sound/kaichang.mp3");
    this.sound.loop = true;
    this.init();
  },
  methods: {
    click(){
      this.$refs['right1'].makeAnimation(0)
    },
    action() {
      this.isplayGBmusic = !this.isplayGBmusic;
    },
    init() {
      // 路由传参拿到当前用户
      this.user = this.$route.query.user;
      // 触发开始游戏
      this.$socket.emit("play", this.user);
      // 监听开始游戏
      this.$socket.on("play", (data) => {
        console.log(data, "play");
        this.startGameSound.src =
          "http://127.0.0.1:3038/jj-sound/match_start.mp3";
        this.isplayGBmusic && this.startGameSound.play();
        this.sound.src = require("@/assets/resources/sound/bg.mp3");
        this.isplayGBmusic && this.sound.play();
      });
      // 发牌
      this.$socket.on("licensing", (data) => {
        console.log(data, "发牌");
      });
      // 首次出牌消息
      this.$socket.on("firstPlay", (data) => {
        console.log(data, "firstPlay首次出牌");
        this.centerObj.firstFlag = data.data.firstPlay;
      });
      // 自己出牌回调
      this.$socket.on("sysPlayCards", (data) => {
        console.log(data, "sysPlayCards");
      });
      // 出牌广播
      this.$socket.on("playCards", (data) => {
        console.log(data, "出牌回调");
        let pokers = [];
        let check = false; //是否过牌
        // 后台传过来的数据如果不是数组形式将转成数组
        Array.isArray(data.data.pokers)
          ? (pokers = data.data.pokers)
          : pokers.push(data.data.pokers);
        data.data.pokers == "check" ? (check = true) : (check = false);
        // 广播识别玩家身份，进行画牌
        switch (data.data.name) {
          case this.rightObj.data.name:
            this.rightObj.isPlay = false;
            if (!check) {
              this.rightObj.outOfCards = pokers.map((i) => {
                return Poker.getCardData(200, i.types, i.point);
              });
              // 将原数据干掉
              for (let i = 0; i < this.rightObj.outOfCards.length; i++) {
                this.rightObj.list.pop();
              }
            }
            console.log(`玩家${data.data.name}出牌---${pokers}`);
            break;
          case this.topObj.data.name:
            this.topObj.isPlay = false;
            if (!check) {
              this.topObj.outOfCards = pokers.map((i) => {
                return Poker.getCardData(200, i.types, i.point);
              });
              // 将原数据干掉
              for (let i = 0; i < this.topObj.outOfCards.length; i++) {
                this.topObj.list.pop();
              }
            }
            console.log(`玩家${data.data.name}出牌---${pokers}`);
            break;
          case this.leftObj.data.name:
            this.leftObj.isPlay = false;
            if (!check) {
              this.leftObj.outOfCards = pokers.map((i) => {
                return Poker.getCardData(200, i.types, i.point);
              });
              // 将原数据干掉
              for (let i = 0; i < this.leftObj.outOfCards.length; i++) {
                this.leftObj.list.pop();
              }
            }
            console.log(`玩家${data.data.name}出牌---${pokers}`);
            break;
          default:
            console.log("不是其他三位玩家出的牌，错误！");
        }
        // 触发音效
        this.toggleSound(pokers);
      });
      // 自己出牌回调
      this.$socket.on("playCardsSelf", (data) => {
        console.log(data, "自己出牌回调");
        if (data.data.flag) {
          this.centerObj.isPlay = false;
          if (data.data.check) return; //过牌成功回调，不往下处理
          // 拿到已经出的牌的下标
          let indexArr = includes(this.centerObj.list, data.data.pokers);
          indexArr.forEach((i) => {
            let newArr = this.centerObj.list[i];
            newArr.isMoveOut = true;
            console.log(newArr, "出牌成功呢");
            this.centerObj.list.splice(i, 1, newArr);
          });
          // let newArr = this.centerObj.list
          // indexArr.forEach(i =>{
          //   newArr.forEach((item,index) =>{
          //     if(index == i){
          //       item.isMoveOut = true
          //     }
          //   })
          // })
          // this.centerObj.list = newArr;
          // 初始化牌面占位
          this.$nextTick(() => {
            this.initLocation();
          });
        }
      });
      // 监听发牌广播
      this.$socket.on("cardsCount", (data) => {
        console.log(data, "huidiao");
        // 牌面赋值 ---待优化
        this.pokers = data.data[0].pokers;
        this.rightCount = data.data[1].pokers;
        this.topCount = data.data[2].pokers;
        this.leftCount = data.data[3].pokers;

        // 玩家信息赋值 ---待优化
        this.centerObj.data.name = data.data[0].name;
        this.rightObj.data.name = data.data[1].name;
        this.topObj.data.name = data.data[2].name;
        this.leftObj.data.name = data.data[3].name;

        // 玩家出过的牌清零
        this.rightObj.outOfCards.length = 0;
        this.topObj.outOfCards.length = 0;
        this.leftObj.outOfCards.length = 0;

        // 玩家牌面画牌 ---待优化
        this.rightObj.list = this.initOrderCards(this.rightCount);
        this.topObj.list = this.initOrderCards(this.topCount);
        this.leftObj.list = this.initOrderCards(this.leftCount);
        // 赋值并排序
        this.centerObj.list = this.pokers
          .map((i) => {
            let obj = {
              src: Poker.getCardData(200, i.types, i.point),
              types: i.types,
              point: i.point,
              isMoveTop: false,
              isMoveOut: false,
              size: i.size,
              integral: i.integral,
            };
            return obj;
          })
          .sort((a, b) => {
            return b.size - a.size;
          });
        // this.centerObj.list.sort((a,b) =>{
        //   return b.size - a.size;
        // })
        // 初始化牌占位，加动画
        setTimeout(this.move, 1000);
      });
      // 轮到谁出牌
      this.$socket.on("chupai", (data) => {
        console.log(data, "chupai");
        switch (data.data.name) {
          case this.user.name:
            this.centerObj.list.forEach((item, index, arr) => {
              if (item.isMoveOut) {
                arr.splice(index, 1);
              }
            });
            this.centerObj.isPlay = true;
            break;
          case this.rightObj.data.name:
            this.rightObj.isPlay = true;
            console.log(`轮到玩家${data.data.name}出牌---`);
            break;
          case this.topObj.data.name:
            this.topObj.isPlay = true;
            console.log(`轮到玩家${data.data.name}出牌---`);
            break;
          case this.leftObj.data.name:
            this.leftObj.isPlay = true;
            console.log(`轮到玩家${data.data.name}出牌---`);
            break;
          default:
            console.log("不是轮到其他三位玩家出牌，错误！");
        }
      });
      // 积分广播
      this.$socket.on("integralMsg", (data) => {
        console.log(data, "积分广播消息");
        switch (data.data.name) {
          case this.user.name:
            this.addIntegral(
              "center_integral",
              this.centerObj,
              data.data.integral
            );
            break;
          case this.rightObj.data.name:
            this.addIntegral(
              "right_integral",
              this.rightObj,
              data.data.integral
            );
            break;
          case this.topObj.data.name:
            this.addIntegral("top_integral", this.topObj, data.data.integral);
            break;
          case this.leftObj.data.name:
            this.addIntegral("left_integral", this.leftObj, data.data.integral);
            break;
          default:
            console.log("不是轮到其他三位玩家的广播，错误！");
        }
      });
      // 表情动画互动
      this.$socket.on("animation", data => {
        console.log(data,"animation");
        const { index, from, to } = data;
        this.animationToEl = to;
        this.animationIndex = index;
        switch(to){
          case this.user.name:
            this.animationToEl = 'centerImg'
            break;
          case this.rightObj.data.name:
            this.animationToEl = 'rightImg'
            break;
          case this.topObj.data.name:
            this.animationToEl = 'topImg'
            break;
          case this.leftObj.data.name:
            this.animationToEl = 'leftImg'
            break;
        }
        switch(from){
          case this.user.name:
            this.animationFrom = 'centerImg'
            break;
          case this.rightObj.data.name:
            this.animationFrom = 'rightImg'
            break;
          case this.topObj.data.name:
            this.animationFrom = 'topImg'
            break;
          case this.leftObj.data.name:
            this.animationFrom = 'leftImg'
            break;
        }
        this.animationAction();
      })
    },
    // 画牌
    makeCard() {
      // center
      console.log(this.pokers, "pkers");
      this.pokers.forEach((i) => {
        let obj = {
          src: Poker.getCardData(200, i.types, i.point),
          types: i.types,
          point: i.point,
          isMoveTop: false,
          isMoveOut: false,
        };
        this.centerObj.list.push(obj);
      });
    },
    // 初始化手里牌动画
    move() {
      this.$nextTick(() => {
        // center
        // this.$refs['center'].forEach((v, i) => {
        //   v.style.transform = `translateX(${i * 20}px)`;
        // });
        this.initLocation();
        // right
        this.$refs["right"].forEach((v, i) => {
          v.style.transform = `translateY(${i * 20}px)`;
        });
        // top
        this.$refs["top"].forEach((v, i) => {
          v.style.transform = `translateX(${i * 20}px)`;
        });
        // left
        this.$refs["left"].forEach((v, i) => {
          v.style.transform = `translateY(${i * 20}px)`;
        });
      });
    },
    // 初始化手里牌位置
    initLocation() {
      let i = 0; //模拟下标，使用循环下标无法对位置进行排序
      this.$refs["center"].forEach((v) => {
        if (v.classList.contains("moveOut")) return;
        else {
          v.style.transform = `translateX(${i * 20}px)`;
          i++;
        }
      });
    },
    // 点击上牌
    pokerClick(index) {
      this.centerObj.list[index].isMoveTop = !this.centerObj.list[index]
        .isMoveTop;
    },
    // 出牌
    moveOut() {
      if (!this.centerObj.isPlay) return;
      let arr = [];
      this.centerObj.list.forEach((i) => {
        if (i.isMoveTop) {
          let obj = {
            types: i.types,
            point: i.point,
            size: i.size,
            integral: i.integral,
          };
          arr.push(obj);
        }
      });
      // 单张发送对象，多张发送数组
      arr.length == 1
        ? this.$socket.emit("playCards", { pokers: arr[0] })
        : this.$socket.emit("playCards", { pokers: arr });
    },
    // 不出牌
    moveCheck() {
      this.centerObj.list.forEach((i) => {
        i.isMoveTop = false;
      });

      this.$socket.emit("playCards", { pokers: null, check: true });
    },
    // 提示出牌
    prompt() {
      console.log("提示");
    },
    // 画牌
    initOrderCards(number) {
      let arr = [];
      for (let i = 0; i < number; i++) {
        arr[i] = Poker.getBackData(200, "#7A7BB8", "#2E319C");
      }
      return arr;
    },
    // 玩家出牌画牌
    inputCardsOfOut() {},
    // 自身玩家的定时器读秒
    runTimerForSelf(player) {
      player.timer--; //递减
      // 如果已经出牌了，直接关掉定时器
      if (!player.isPlay) {
        player.timer = 20;
        // 定时器读秒到底
      } else if (player.timer == 0) {
        // 首次出牌玩家需要出一张牌 --> 最小的那一张
        if (player.firstFlag) {
          // 改变数组最后一张牌的位置，然后触发出牌函数
          // let newArr = this.centerObj.list[this.centerObj.list.length - 1];
          // console.log(this.centerObj);
          // console.log(newArr,"dddddd");
          // newArr.isMoveTop = true;
          // this.centerObj.list.splice(this.centerObj.length - 1,1,newArr);
          let newArr = this.centerObj.list;
          newArr.forEach((item, index, arr) => {
            index == arr.length - 1
              ? (item.isMoveTop = true)
              : (item.isMoveTop = false);
          });
          this.centerObj.list = newArr;
          console.log(this.centerObj, "duixiang");
          this.moveOut();
          player.firstFlag = false;
          player.timer = 20;
        } else {
          this.moveCheck(); //过牌
        }
        player.timer = 20;
        return;
      } else {
        setTimeout(() => {
          this.runTimerForSelf(player);
        }, 1000);
      }
    },
    // 其他玩家的定时器读秒
    runTimer(player) {
      player.timer--;
      if (!player.isPlay || player.timer == 0) {
        player.timer = 20;
      } else {
        setTimeout(() => {
          this.runTimer(player);
        }, 1000);
      }
    },
    // 出牌音效切换
    toggleSound(list) {
      let point = "";
      list[0] == "check"
        ? (point = list[0])
        : list.forEach((card) => {
            card.point === "joker"
              ? (point += card.name)
              : (point += card.point);
          });
      console.log(toggleSrc(point), "这是src");
      console.log(point, "point");
      this.playCardsSound.src = toggleSrc(point);
      this.playCardsSound.play();
    },
    // 积分递增效果
    addIntegral(ref, obj, integral) {
      let speed = 50; //速度
      let count = obj.integral + integral;
      this.$refs[ref].style.transition = "0.3s all";
      this.$refs[ref].style.fontSize = "32px";
      window.clearInterval(this.integralTimer); //先切除定时器
      this.integralTimer = window.setInterval(() => {
        if (obj.integral >= count) {
          this.$refs[ref].style.fontSize = "16px";
          window.clearInterval(this.integralTimer);
          this.integralTimer = null;
        } else obj.integral++;
      }, speed);
    },
    // 交互动画按钮
    animation(indexString, toEl, name) {
      this.animationIndex = indexString;
      console.log(this.animationIndex,"index");
      this.animationToEl = toEl;
      this.$socket.emit("animation", {
        index: indexString,
        from: this.user.name,
        to: name
      })
      this.animationAction();
    },
    // 交互动画触发
    animationAction(){      
      switch(this.animationIndex){
        case 'other_2':
          this.animationMoveElVisible = true;
          setTimeout(()=>{            
            this.animationElVisible = true;
          },1000)
          break;
        case 'other_3':
          this.animationMoveElVisible = true;
          setTimeout(()=>{            
            this.animationElVisible = true;
          },2000)          
          break;
        case 'other_4':
          this.animationMoveElVisible = true;
          setTimeout(()=>{            
            this.animationElVisible = true;
          },500)          
          break;
        default:
          this.animationMoveElVisible = true;
          this.animationElVisible = true;
          break;          
      }      
      this.animationSound.src = getImgSrc(this.animationIndex).sound;
      this.animationSound.play();
    },
    // 获取动画元素原始和改变后的位置
    _getElPosition() {
      let from = this.animationFrom || "centerImg";
      console.log(from,"from");
      let to = this.animationToEl;
      let startX = this.$refs[from].getBoundingClientRect().left;
      let startY = this.$refs[from].getBoundingClientRect().top;
      let endX = this.$refs[to].getBoundingClientRect().left;
      let endY = this.$refs[to].getBoundingClientRect().top;
      return {
        startX,
        startY,
        endX,
        endY,
      };
    },
    beforeEnter(el) {
      const {startY,startX} = this._getElPosition();
      el.style.top = startY + "px";
      el.style.left = startX + "px";
      this.animationMoveImg = getImgSrc(this.animationIndex).img;
    },
    enter(el, done) {
      // el.offsetWidth;
      const { endY,endX } = this._getElPosition()
      el.style.top = endY + "px";
      el.style.left = endX + "px";
      el.style.transition = "all .3s ease";
      switch(this.animationIndex){
        case 'other_2':
          el.style.transition = "all 2s ease";
          break;
        case 'other_3':
          el.style.transition = "all 2s ease";
          break;
        case 'other_4':
          el.style.transition = "all .3s ease";
          break;
        default:
          el.style.transition = "all .3s ease";
          break;          
      }
      done();
    },
    afterEnter(el) {
      this.animationMoveElVisible = false;
    },
    _beforeEnter(el){
      const { endX, endY } = this._getElPosition();
      const index = changeImages(this.animationIndex)
      el.style.top = endY + "px";
      el.style.left = endX + "px";
      this.animationToEl = index;
      if(this.animationIndex === 'other_1')
        el.style.top = endY - 40 + "px";
    },
    async _enter(el,done){
      let img = el.querySelector("img");
      let flag = await changeImages(this.animationIndex,img);
      flag && done();
    },
    _afterEnter(el){
      this.animationElVisible = false;
    },
    // 点击其他区域收起玩家卡片
    handlePanelClick(){
      let flag = this.leftObj.infoCardVisble ||
      this.rightObj.infoCardVisble ||
      this.topObj.infoCardVisble ||
      this.centerObj.infoCardVisble;
      if(!flag) return
      this.leftObj.infoCardVisble = false;
      this.rightObj.infoCardVisble = false;
      this.topObj.infoCardVisble = false;
      this.centerObj.infoCardVisble = false;
    }
  },
  watch: {
    "centerObj.isPlay": {
      handler(newVal, oldVal) {
        newVal && this.runTimerForSelf(this.centerObj);
      },
      deep: true,
      immediate: true,
    },
    "rightObj.isPlay": {
      handler(newVal, oldVal) {
        newVal &&
          ((this.rightObj.outOfCards = []), this.runTimer(this.rightObj));
      },
      deep: true,
      immediate: true,
    },
    "topObj.isPlay": {
      handler(newVal, oldVal) {
        newVal && ((this.topObj.outOfCards = []), this.runTimer(this.topObj));
      },
      deep: true,
      immediate: true,
    },
    "leftObj.isPlay": {
      handler(newVal, oldVal) {
        newVal && ((this.leftObj.outOfCards = []), this.runTimer(this.leftObj));
      },
      deep: true,
      immediate: true,
    },
    "centerObj.infoCardVisble": {
      handler(newVal, oldVal) {
        if(newVal){
          this.rightObj.infoCardVisble = false;
          this.topObj.infoCardVisble = false;
          this.leftObj.infoCardVisble = false;
        }
      },
      deep: true,
      immediate: true,
    },
    "leftObj.infoCardVisble": {
      handler(newVal, oldVal) {
        if(newVal){
          this.rightObj.infoCardVisble = false;
          this.topObj.infoCardVisble = false;
          this.centerObj.infoCardVisble = false;
        }
      },
      deep: true,
      immediate: true,
    },
    "rightObj.infoCardVisble": {
      handler(newVal, oldVal) {
        if(newVal){
          this.centerObj.infoCardVisble = false;
          this.topObj.infoCardVisble = false;
          this.leftObj.infoCardVisble = false;
        }
      },
      deep: true,
      immediate: true,
    },
    "topObj.infoCardVisble": {
      handler(newVal, oldVal) {
        if(newVal){
          this.rightObj.infoCardVisble = false;
          this.centerObj.infoCardVisble = false;
          this.leftObj.infoCardVisble = false;
        }
      },
      deep: true,
      immediate: true,
    },
    isplayGBmusic(newVal) {
      newVal ? this.sound.play() : this.sound.pause();
    },
  },
  beforeDestroy() {
    this.sound.pause();
    this.sound = null;
    this.startGameSound.pause();
    this.startGameSound = null;
    this.playCardsSound.pause();
    this.playCardsSound = null;
  },
  components: {
    Dialog,
  },
};
</script>
<style scoped lang="stylus">
.game {
  width: 100vw;
  height: 100vh;
  background: url('../assets/resources/bg.png');

  .logo {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 50px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .top {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 100px;

    // border: 1px solid #ccc;
    &-poker {
      height: 70px;
      width: 60px;
      position: absolute;
      top: 20px;
      left: 100px;
      transform: translate(0, 0);
      transition: transform 0.5s;

      img {
        width: 100%;
        height: 100%;
      }
    }

    &-poker-out {
      position: absolute;
      top: 100px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 70px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    &-timer {
      position: absolute;
      top: 100px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 40px;
      display: flex;
      align-items: center;

      img {
        width: 30px;
        height: 30px;
      }
    }

    .avatar {
      position: absolute;
      top: 0;
      left: 20px;
      height: 100px;
      width: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .player_name {
        color: white;
        width: 100px;
        display: flex;
        justify-content: space-between;
      }

      img {
        width: 100%;
        cursor pointer
      }
    }
  }

  .center {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 180px;

    &-operation {
      width: 100%;
      display: flex;
      justify-content: center;
      alian-items: center;

      button {
        width: 80px;
      }

      &-check {
        margin: 0 20px;
      }
    }

    &-poker {
      height: 120px;
      width: 100px;
      position: absolute;
      bottom: 0;
      left: 0;
      transform: translate(0, 0);
      transition: transform 0.5s;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .moveTop {
      bottom: 20px;
    }

    .moveOut {
      width: 60px;
      height: 70px;
      top: -70px;
      left: 50%;
      transform: translateX(-50%) !important;
    }

    &-timer {
      position: absolute;
      top: -40px;
      left: 50%;
      transform: translateX(-50%);
      height: 40px;
      display: flex;
      align-items: center;

      img {
        width: 30px;
        height: 30px;
      }
    }

    .avatar {
      position: absolute;
      right: 0;
      bottom: 0;
      height: 120px;
      width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .user {
        width: 100%;
        height: 100%;

        img {
          width: 100%;
        cursor pointer
        }
      }

      .player_name {
        color: white;
        width: 100px;
        display: flex;
        justify-content: space-between;
      }
    }
  }

  .right {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: 350px;

    &-poker {
      height: 70px;
      width: 60px;
      position: absolute;
      top: 120px;
      left: 10px;
      transform: translate(0, 0);
      transition: transform 0.5s;

      img {
        width: 100%;
        height: 100%;
      }
    }

    &-poker-out {
      position: absolute;
      top: 50%;
      right: 100px;
      transform: translateY(-50%);
      width: 60px;
      height: 70px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    &-timer {
      position: absolute;
      left: -100px;
      top: 50%;
      transform: translateY(-50%);
      width: 100px;
      height: 40px;
      display: flex;
      align-items: center;

      img {
        width: 30px;
        height: 30px;
      }
    }

    .avatar {
      position: absolute;
      top: 0;
      right: 20px;
      height: 100px;
      width: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .player_name {
        color: white;
        width: 100px;
        display: flex;
        justify-content: space-between;
      }

      img {
        width: 100%;
        cursor pointer
      }
    }
  }

  .left {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: 350px;

    &-poker {
      height: 70px;
      width: 60px;
      position: absolute;
      top: 120px;
      left: 30px;
      transform: translate(0, 0);
      transition: transform 0.5s;

      img {
        width: 100%;
        height: 100%;
      }
    }

    &-poker-out {
      position: absolute;
      top: 50%;
      left: 100px;
      transform: translateY(-50%);
      width: 60px;
      height: 70px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    &-timer {
      position: absolute;
      left: 120px;
      top: 50%;
      transform: translateY(-50%);
      width: 100px;
      height: 40px;
      display: flex;
      align-items: center;

      img {
        width: 30px;
        height: 30px;
      }
    }

    .avatar {
      position: absolute;
      top: 0;
      left: 20px;
      height: 100px;
      width: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .player_name {
        color: white;
        width: 100px;
        display: flex;
        justify-content: space-between;
      }

      img {
        width: 100%;
        cursor pointer
      }
    }
  }

  .action {
    position: fixed;
    right: 5px;
    top: 5px;
    font-size: 28px;
    cursor: pointer;

    &:hover {
      opacity: 0.9;
    }
  }

  .animationMoveEl {
    position: fixed;
    width: 80px;
    height: 80px;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .animationEl {
    position fixed
    width 80px
    height 80px
    img {
      width 100%
      height 100%
      transform scale(2.5)
    }
  }
}
</style>